<template>
  <view class="container">
   
    <view class="top-bar">
      <navigator class="back-btn" url="/pages/regularUser/quickFuction/appointCard/appointCard">←</navigator>
      <text class="title">预约探访</text>
    </view>

   
    <scroll-view scroll-y="true" class="content">
     
      <view class="card elderly-info">
        <view class="card-header">
          <text class="card-title">老人信息</text>
        </view>
        <view class="elderly-details">
          <image src="/static/images/elderly/avatar.png" class="avatar"></image>
          <view class="info">
            <text class="name">李奶奶</text>
            <text class="age">78岁</text>
            <text class="address">幸福小区3栋2单元501室</text>
          </view>
        </view>
      </view>

     
      <view class="card appointment-form">
        <view class="card-header">
          <text class="card-title">探访信息</text>
        </view>
        
        <view class="form-item">
          <text class="label">探访日期</text>
          <picker mode="date" :value="formData.visitDate" @change="onDateChange" class="picker">
            <view class="picker-display">
              <text class="picker-text">{{formData.visitDate || '请选择日期'}}</text>
              <text class="picker-icon">📅</text>
            </view>
          </picker>
        </view>
        
      
        <view class="form-item">
          <text class="label">探访时间</text>
          <picker mode="time" :value="formData.visitTime" @change="onTimeChange" class="picker">
            <view class="picker-display">
              <text class="picker-text">{{formData.visitTime || '请选择时间'}}</text>
              <text class="picker-icon">⏰</text>
            </view>
          </picker>
        </view>
        
        
        <view class="form-item">
          <text class="label">探访时长</text>
          <picker :range="durationOptions" :value="durationIndex" @change="onDurationChange" class="picker">
            <view class="picker-display">
              <text class="picker-text">{{durationOptions[durationIndex] || '请选择时长'}}</text>
              <text class="picker-icon">⏱️</text>
            </view>
          </picker>
        </view>
        
        
        <view class="form-item">
          <text class="label">特殊需求</text>
          <textarea 
            v-model="formData.specialNeeds" 
            placeholder="请描述老人的特殊需求或注意事项..." 
            class="textarea"
            maxlength="200"
          ></textarea>
          <text class="char-count">{{formData.specialNeeds.length}}/200</text>
        </view>
        
       
        <view class="form-item">
          <text class="label">志愿者偏好</text>
          <view class="preference-options">
            <view 
              v-for="(option, index) in preferenceOptions" 
              :key="index" 
              :class="['preference-option', formData.preference === option.value ? 'active' : '']"
              @click="selectPreference(option.value)"
            >
              <text class="option-text">{{option.name}}</text>
            </view>
          </view>
        </view>
      </view>
      
    
      <view class="tip-card">
        <text class="tip-title">💡 温馨提示</text>
        <text class="tip-content">请确保在预约时间前做好准备，志愿者将会按时上门探访。如有变动请提前24小时取消或修改预约。</text>
      </view>
    </scroll-view>
    
    <view class="bottom-bar">
      <button class="submit-btn" @click="submitAppointment">确认预约</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        visitDate: '',
        visitTime: '',
        duration: 1,
        specialNeeds: '',
        preference: ''
      },
      durationIndex: 0,
      durationOptions: ['1小时', '1.5小时', '2小时', '2.5小时', '3小时'],
      preferenceOptions: [
        { name: '无特殊要求', value: 'none' },
        { name: '女性志愿者', value: 'female' },
        { name: '有医护经验', value: 'medical' },
        { name: '本地志愿者', value: 'local' }
      ]
    }
  },
  methods: {
    onDateChange(e) {
      this.formData.visitDate = e.detail.value;
    },
    onTimeChange(e) {
      this.formData.visitTime = e.detail.value;
    },
    onDurationChange(e) {
      this.durationIndex = e.detail.value;
      this.formData.duration = parseFloat(this.durationOptions[this.durationIndex]);
    },
    selectPreference(value) {
      this.formData.preference = value;
    },
    calculatePrice() {
      // 简单计算费用，实际应用中可能需要更复杂的逻辑
      const basePrice = 50;
      return basePrice * this.formData.duration;
    },
    submitAppointment() {
      // 表单验证
      if (!this.formData.visitDate) {
        uni.showToast({ title: '请选择探访日期', icon: 'none' });
        return;
      }
      if (!this.formData.visitTime) {
        uni.showToast({ title: '请选择探访时间', icon: 'none' });
        return;
      }
      
      // 模拟提交成功
      uni.showModal({
        title: '预约成功',
        content: '您的探访预约已提交成功，志愿者将在24小时内与您确认。',
        showCancel: false,
        success: () => {
          uni.navigateBack();
        }
      });
    }
  }
}
</script>

<style>
page {
  background-color: #f8f8f8;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.top-bar {
  padding: 15px 20px;
  background-color: #FD995E;
  display: flex;
  align-items: center;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
}

.back-btn {
  font-size: 24px;
  color: white;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.2);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: white;
  text-align: center;
  flex: 1;
}


.content {
  flex: 1;
  padding: 15px;
  box-sizing: border-box;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.card-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}


.elderly-details {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  border: 2px solid #ff9800;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.age {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.address {
  font-size: 14px;
  color: #888;
}


.form-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  font-size: 15px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.picker {
  width: 100%;
}

.picker-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.picker-text {
  font-size: 15px;
  color: #333;
}

.picker-text:empty::before {
  content: attr(placeholder);
  color: #999;
}

.picker-icon {
  font-size: 18px;
}

.textarea {
  width: 100%;
  height: 100px;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 15px;
  box-sizing: border-box;
  line-height: 1.5;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 志愿者偏好选项 */
.preference-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preference-option {
  padding: 8px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background-color: #f9f9f9;
  transition: all 0.3s;
}

.preference-option.active {
  background-color: #fff3e0;
  border-color: #ff9800;
  color: #ff9800;
}

.option-text {
  font-size: 14px;
}

.tip-card {
  background-color: #fff8e1;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #ff9800;
}

.tip-title {
  display: block;
  font-size: 15px;
  font-weight: bold;
  color: #ff9800;
  margin-bottom: 8px;
}

.tip-content {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}


.bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.price-info {
  display: flex;
  flex-direction: column;
}

.price-label {
  font-size: 14px;
  color: #666;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #ff5722;
}

.submit-btn {
  background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0 30px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
  transition: all 0.3s;
}

.submit-btn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(255, 87, 34, 0.3);
}
</style>